import React, { Component } from 'react'
import { Routes, Route, Navigate } from 'react-router-dom'
import Home from './pages/Home';
import About from './pages/About';
import Header from './components/Header';
import MyNavLink from './components/MyNavLink';



export default class App extends Component {

  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <Header></Header>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">

              {/* <a className="list-group-item" href="./about.html">About</a>
              <a className="list-group-item active" href="./home.html">Home</a> */}

              <MyNavLink to='/home' >Home</MyNavLink>
              <MyNavLink to='/about' >About</MyNavLink>

            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {/* 注册路由 */}


                <Routes>
                  <Route  path='/about' element={<About />} />
                  <Route path='/home/*' element={<Home />} />
                  <Route path="/" element={<Navigate to="/about"/>}/>
                </Routes>

              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}


